<!DOCTYPE html>
<html>
    <head>
        <title>Tests getBoundingClientRect for ranges spanning multiple elements</title>
        <script src="../../../resources/testharness.js"></script>
        <script src="../../../resources/testharnessreport.js"></script>
    </head>
    <style>
        p { visibility: hidden; }
        p > span { text-decoration: underline; }
    </style>
    <body>
        <p id="test">Test that getBoundingClientRect <span>returns the correct
            results for ranges spanning multiple</span> elements.</p>
        <p id="reference">Test that getBoundingClientRect <span>returns</span>
            the correct results for ranges spanning multiple elements.</p>
        <script>
            test(function() {
                var element = document.getElementById('test');
                var span = element.getElementsByTagName('span')[0];
                var range = document.createRange();
                range.setStart(element.firstChild, 10);
                range.setEnd(element.firstElementChild.firstChild, 7);
                
                element = document.getElementById('reference');
                var reference = document.createRange();
                reference.setStart(element.firstChild, 10);
                reference.setEnd(element.firstElementChild.firstChild, 7);

                assert_equals(
                    Math.round(range.getBoundingClientRect().width),
                    Math.round(reference.getBoundingClientRect().width),
                    'Width of range should match reference range.');
                assert_less_than(
                    Math.round(range.getBoundingClientRect().width),
                    Math.round(span.getBoundingClientRect().width),
                    'Width of range should be less than inner span.');
            }, 'Check reported width of range.');
        </script>
    </body>
</html>
